<!--
 * @Author: wusd
 * @Date: 2022-05-18 14:58:44
 * @LastEditors: wusd
 * @LastEditTime: 2024-02-04 11:13:50
 * @Description: 
 * 
-->
<script lang="tsx">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { WTableConfig } from 'types/table'
import { WDialogConfig, WPageConfig } from 'types/page'
import { WFormConfig } from 'types/form'
import wTable from '@/components/table'
import wForm from '@/components/form'
import { AnyObj, ApiCode } from 'types/common'
import { isNull, mergeObject, resetObject, valueIsNull } from '@/untils'
@Component({
  name: 'WPage',
  components: {
    wTable,
    wForm
  }
})
export default class WPage extends Vue {
  @Prop({
    default: () => ({}),
    type: Object
  })
  pageConfig!: WPageConfig

  @Watch('pageConfig', { deep: true, immediate: true })
  changeConfig() {
    this.init()
  }
  created() {
    // this.init()
  }

  public init() {
    /**合并配置项 */
    mergeObject(this.pageConfig, Vue.prototype?.$baseConfig?.pageConfig)
    let config = this.pageConfig?.fixWPageConfig?.(this.pageConfig)
    if (config) {
      this.pageConfig = config
    }
    this.httpCodekey = Vue.prototype?.$baseConfig?.httpCodekey || this.httpCodekey

    this.tableConfig = this.pageConfig.tableConfig
    /** 初始化apiCode，后台接口返回成功时的code码 默认0为成功 */
    this.apiCode = this.pageConfig?.apiCode || 0
    if (isNull(this.tableConfig.apiCode)) {
      this.tableConfig.apiCode = this.apiCode
    }

    this.tableConfig?.outBtns?.forEach(item => {
      if (item.key === 'add') {
        //重置点击新增按钮回调
        item.callback = this.handleAdd
      }
    })
    this.tableConfig?.innerBtns?.forEach(item => {
      if (item.key === 'update') {
        //重置点击新增按钮回调
        item.callback = this.handleUpdate
      }
    })
    if (this.pageConfig?.dialogConfig) {
      this.dialogConfig = this.pageConfig.dialogConfig
    }
    if (this.pageConfig?.formConfig) {
      this.formConfig = this.pageConfig.formConfig
      //初始化表单数据
      this.formConfig.columns?.forEach(item => {
        this.formData[item.prop] = valueIsNull(item.defaultValue) ? '' : item.defaultValue
      })
      if (isNull(this.formConfig.apiCode)) {
        this.formConfig.apiCode = this.apiCode
      }
    }
  }

  public apiCode: ApiCode = 0
  public httpCodekey = 'code'

  public tableConfig: WTableConfig = {
    columns: []
  }
  public formConfig: WFormConfig = {
    columns: []
  }
  public dialogTitle = ''
  public dialogType = ''
  public dialogConfig: WDialogConfig = {}

  public formData: AnyObj = {}

  public dialogVisible = false
  /**点击新增 */
  public handleAdd() {
    this.dialogTitle = '新增'
    this.dialogType = 'add'
    this.dialogVisible = true
  }
  /**关闭弹窗 */
  public closeDialog(evenType: 'close' | 'cancelBtn' | 'confirmBtn') {
    this.formData = resetObject(this.formData, [])
    ;(this.$refs.wForm as any).$refs.w_form?.resetFields()
    this.dialogConfig?.beforeDiaClose?.bind(this, {
      dialogType: this.dialogType,
      evenType
    })()
    this.dialogVisible = false
  }
  /**点击弹窗确定按钮 */
  public handleFormYes() {
    let formDom = (this.$refs.wForm as any).$refs.w_form
    let formData = { ...this.formData }
    delete formData.$fromRender
    formDom.validate(async (valid: any) => {
      if (valid) {
        let res: AnyObj = {}
        if (this.dialogType === 'add') {
          if (this.pageConfig?.api?.add) {
            res = await this.pageConfig?.api.add(formData)
          } else {
            this.$message(`缺少${this.dialogType}api`)
          }
        }

        if (this.dialogType === 'update') {
          if (this.pageConfig?.api?.update) {
            res = await this.pageConfig?.api.update(formData)
          } else {
            this.$message(`缺少${this.dialogTitle}api`)
          }
        }

        if (res[this.httpCodekey] === this.apiCode) {
          ;(this.$refs.wTable as any).getList()
          this.closeDialog('confirmBtn')
        }
      } else {
        return false
      }
    })
  }
  /**点击编辑 */
  public async handleUpdate(data: any) {
    let row = data.row
    this.dialogTitle = '编辑'
    this.dialogType = 'update'
    let detail = {}
    if (this.pageConfig?.api?.detail) {
      let res: AnyObj = await this.pageConfig?.api?.detail(row)
      if (res[this.httpCodekey] === this.apiCode) {
        detail = res.data || {}
      }
    }
    this.formData = {
      ...row,
      ...detail
    }
    this.dialogVisible = true
  }
  protected render() {
    return (
      <div class="w_page">
        <wTable ref="wTable" tableConfig={this.tableConfig}></wTable>

        <el-dialog
          {...this.dialogConfig?.nodeData}
          title={this.dialogTitle}
          visible={this.dialogVisible}
          width={this.dialogConfig.width || '30%'}
          close-on-click-modal={this.dialogConfig['close-on-click-modal'] || false}
          before-close={() => this.closeDialog('close')}>
          <wForm ref="wForm" v-model={this.formData} formConfig={this.formConfig}></wForm>
          <span slot="footer" class="dialog-footer">
            <el-button onclick={() => this.closeDialog('cancelBtn')}>取 消</el-button>
            <el-button type="primary" onclick={this.handleFormYes}>
              确 定
            </el-button>
          </span>
        </el-dialog>
      </div>
    )
  }
}
</script>

<style lang="scss" scoped>
.w_page {
  padding: 16px;
}
</style>
